<template>
  <div class="pager">
    <ul class="page">
      <li
        class="page-prev"
       :class="{'page-disabled': disabledPrev}"
        @click="prev"
      >
        <a><i class="page-icon icon-arrow-back">{{'‹'}}</i></a>
      </li>
      <li
        class="page-item"
       :class="{'page-item-active': disabledPrev}"
        @click="changePage(1)"
      >
        <a>1</a>
      </li>
      <li
        v-if="currentPage > 5"
        class="page-item-jump-prev"
        @click="fastPrev"
      >
        <a><i class="page-icon icon-arrow-back">{{'«'}}</i><i class="page-icon icon-more">{{'···'}}</i></a>
      </li>
      <li
        v-if="currentPage === 5"
        class="page-item"
        @click="changePage(currentPage - 3)"
      >
        <a>{{ currentPage - 3 }}</a>
      </li>
      <li
        v-if="currentPage - 2 > 1"
        class="page-item"
        @click="changePage(currentPage - 2)"
      >
        <a>{{ currentPage - 2 }}</a>
      </li>
      <li
        v-if="currentPage - 1 > 1"
        class="page-item"
        @click="changePage(currentPage - 1)"
      >
        <a>{{ currentPage - 1 }}</a>
      </li>
      <li
        v-if="currentPage !== 1 && currentPage !== pageNum"
        class="page-item page-item-active"
      >
        <a>{{ currentPage }}</a>
      </li>
      <li
        v-if="currentPage + 1 < pageNum"
        class="page-item"
        @click="changePage(currentPage + 1)"
      ><a>{{ currentPage + 1 }}</a>
      </li>
      <li
        v-if="currentPage + 2 < pageNum"
        class="page-item"
        @click="changePage(currentPage + 2)"
      >
        <a>{{currentPage + 2 }}</a>
      </li>
      <li
        v-if="pageNum - currentPage === 4"
        class="page-item"
        @click="changePage(currentPage + 3)"
      >
        <a>{{ currentPage + 3 }}</a>
      </li>
      <li
        v-if="pageNum - currentPage >= 5"
        class="page-item-jump-next"
        @click="fastNext"
      >
        <a><i class="page-icon icon-arrow-forward">{{'»'}}</i><i class="page-icon icon-more">{{'···'}}</i></a>
      </li>
      <li
        v-if="pageNum > 1"
        class="page-item"
       :class="{'page-item-active': disabledNext}"
        @click="changePage(pageNum)"
      >
        <a>{{ pageNum }}</a></li>
      <li
        class="page-next"
       :class="{'page-disabled': disabledNext}"
        @click="next"
      >
        <a><i class="page-icon icon-arrow-forward">{{'›'}}</i></a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    pageIndex: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage: this.pageIndex,
      currentPageSize: this.pageSize
    }
  },
  computed: {
    pageNum() {
      const pageNum = Math.ceil(this.total / this.currentPageSize);

      if (pageNum === 0) {
        return 1;
      } else {
        return pageNum;
      }
    },

    disabledPrev() {
      return this.currentPage === 1;
    },
    disabledNext() {
      return this.currentPage === this.pageNum;
    }
  },
  watch: {
    pageIndex(val) {
      this.currentPage = val;
    }
  },

  methods: {
    prev() {
      const current = this.currentPage;
      if (current <= 1) {
        return false;
      }
      this.changePage(current - 1);
    },
    next() {
      const current = this.currentPage;
      if (current >= this.pageNum) {
        return false;
      }
      this.changePage(current + 1);
    },

    fastPrev() {
      const page = this.currentPage - 5;
      if (page > 0) {
        this.changePage(page);
      } else {
        this.changePage(1);
      }
    },
    fastNext() {
      const page = this.currentPage + 5;
      if (page > this.pageNum) {
        this.changePage(this.pageNum);
      } else {
        this.changePage(page);
      }
    },

    changePage(page) {
      if (this.currentPage !== page) {
        this.currentPage = page;
        this.$emit('on-change', page);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pager {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  padding: 10px 0;
  user-select: none;
}

.page {
  font-family: PingFangSC-Regular, PingFang SC, Arial, sans-serif;
  height: auto;

  a {
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    color: #666;
    transition: color .2s ease;
  }
  i {
    font-style: normal;
  }
  * {
    box-sizing: border-box;
  }

  .page-item-jump-prev,
  .page-item-jump-next,
  .page-prev,
  .page-next {
    display: inline-block;
    list-style: none;
    vertical-align: middle;
    text-align: center;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    border: 1px solid #DCDEE2;
    border-radius: 2px;
    cursor: pointer;
    user-select: none;
    transition: all .2s ease-in-out;
  }

  .page-item-jump-prev,
  .page-item-jump-next,
  .page-prev {
    margin-right: 4px;
  }

  .page-item-jump-prev,
  .page-item-jump-next {
    border-color: transparent;

    i {
      color: #CCC;

      &:first-child {
        display: none;
      }
    }

    &:hover {
      i:first-child {
        display: inline;
        color: #2D8CF0;
      }
      i:last-child {
        display: none;
      }
    }
  }

  .page-prev,
  .page-next {
    background-color: #FFF;

    a {
      font-size: 14px;
      color: #666;
    }

    &:hover {
      border-color: #2D8CF0;
      a {
        color: #2D8CF0;;
      }
    }
  }

  .page-item {
    display: inline-block;
    list-style: none;
    margin-right: 4px;
    vertical-align: middle;
    text-align: center;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    color: #666;
    border: 1px solid #DCDEE2;
    border-radius: 2px;
    user-select: none;
    cursor: pointer;
    transition: border .2s ease-in-out,color .2s ease-in-out;

    &:hover {
      border-color: #2D8CF0;
      a {
        color: #2D8CF0;
      }
    }
  }

  .page-item-active {
    border-color: #2D8CF0;
    a {
      color: #2D8CF0;
    }
  }
  .page-disabled {
    cursor: not-allowed;

    a {
      cursor: not-allowed;
      color: #CCC;
    }

    &:hover {
      border-color: #DCDEE2;
      a {
        color: #CCC;
      }
    }
  }
}
</style>